<template>
  <div class="calContent">
    <el-calendar v-model="calendarValue" v-dragCal class="calendar">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div
          :class="['is-selecteds', { 'is-selected': data.isSelected }]"
          @click="allcalendar(data, date)"
        >
          {{ data.day.split("-").slice(1).join("-") }}
          <div
            v-for="item in calendarList"
            :key="item.index"
            class="countStyle"
          >
            <span v-if="item.date == data.day.split('-').slice(1).join('-')">
              {{ item.count }}
            </span>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: "MyCalendar",
  data() {
    return {
      calendarValue: new Date(),
      calendarList: [
        {
          count: 9,
          date: "04-03",
        },
        {
          count: 6,
          date: "03-04",
        },
        {
          count: 3,
          date: "04-05",
        },
      ],
    };
  },
  methods: {
    allcalendar(data, date) {
      console.log(data, "----", date);
    },
  },
};
</script>

<style scoped>
.calContent {
  width: 800px;
  height: 600px;
  background: #fc5936;
  position: relative;
}
/* .calContent >>> .el-calendar-table td.is-selected{
  background-color: #fc5936;
} */
.calendar {
  width: 600px;
}
.is-selected {
  color: #fc5936;
  font-weight: bold;
  /* color: #1989FA; */
}
.is-selecteds {
  width: 100%;
  height: 100%;
}
.calContent >>> .el-calendar-table .el-calendar-day {
  position: relative;
}
/* .countStyle {
    width: 30px;
    line-height: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff7010;
    color: #fff;
    font-weight: 900;
    position: absolute;
    right: 30px;
    bottom: 30px;
} */
</style>
import { is } from 'core-js/core/object'; import { position } from
'html2canvas/dist/types/css/property-descriptors/position';
